<template>
  <div class="l-rblock">
    <l-layout :right="320">
      <template #right>
        <l-panel style="padding: 0;" :title="$t('信息填写')">
          <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            ref="form"
            label-width="56px"
            class="pd-16"
          >
            <el-row :gutter="0">
              <el-col>
                <el-form-item :label="$t('名称')" prop="f_Name">
                  <el-input v-model="formData.f_Name"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item :label="$t('编码')" prop="f_Code">
                  <el-input v-model="formData.f_Code"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item :label="$t('分类')" prop="f_Category">
                  <l-select
                    :options="lr_dataItemOptions(lr_dataItem['printSort'])"
                    v-model="formData.f_Category"
                  ></l-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('状态')" prop="f_EnabledMark">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="formData.f_EnabledMark"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('模版')" prop="f_FileId">
                  <l-upload
                    accept=".docx"
                    :isSecretLevel="false"
                    v-model="formData.f_FileId"
                    @load="handleFileLoad"
                    @success="handleFileSuccess"
                    @delete="handleFileDelete"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-alert
                  :title="$t('标记说明')"
                  type="info"
                  :description="$t('1.自定义表单:标记为$组件id$;  2.系统表单:需要提供getPrintData方法,标记为$字段key$;  3.子表数据:$表格id.行号.列组件id$;  4.流程审核信息:节点名称$WFName节点id$、节点审核人$WFUser节点id$、节点审核说明$WFDes节点id$、节点审核时间$WFTime节点id$;')"
                  show-icon
                  :closable="false"
                >
                </el-alert>
              </el-col>
            </el-row>
          </el-form>
        </l-panel>
      </template>
      <div class="l-rblock">
        <iframe class="l-iframe" ref="iframe" frameborder="0"></iframe>
      </div>
    </l-layout>
  </div>
</template>
<script>
const api = window.$api.wordPrint.template;
const apiFile = window.$api.system.annexesFile;
export default {
  data() {
    return {
      formData: {
        f_Name: "",
        f_Code: "",
        f_Category: "",
        f_EnabledMark: 1,
        f_FileId: "",
      },
      rules: {
        f_Name: [{ required: true, message: this.$t("please enter") }],
        f_Code: [
          { required: true, message: this.$t("please enter") },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_Id;
            },
            tableName: "lr_print_word",
            keyName: "f_Id",
          },
        ],
        f_Category: [{ required: true, message: this.$t("please select") }],
        f_FileId: [{ required: true, message: this.$t("请上传") }],
      },
      des: "",
    };
  },
  computed: {},
  methods: {
    async handleFileLoad({ list }) {
      if (list && list.length > 0) {
        const html = await this.$awaitWraper(apiFile.getHtml(list[0].id));
        this.write(html);
      }
    },
    async handleFileSuccess(file) {
      //console.log(file,'file');
      const html = await this.$awaitWraper(apiFile.getHtml(file.fileId || file.file.id));
      this.write(html);
    },
    handleFileDelete() {
      this.write("");
      //console.log("test handleFileDelete");
    },

    write(html) {
      html = html.replace('</style>','td{word-break: break-all;}</style>')
      var iframe = this.$refs.iframe;
      var doc = iframe.contentWindow.document
        ? iframe.contentWindow.document
        : iframe.contentDocument;
      doc.open();
      doc.write(html);
      doc.close();
    },

    // Reset表单
    resetForm() {
      this.$formClear(this.$refs.form);
      this.formData.f_Id = "";
    },
    // 校验表单
    async validateForm() {
      if (!(await this.$formValidateWraper(this.$refs.form))) {
        return false;
      }
      return true;
    },
    // 设置表单数据
    setForm(data) {
      this.formData = data;
    },
    // 获取表单数据
    getForm() {
      return this.$deepClone(this.formData);
    },

    async loadFormData({ keyValue }) {
      const data = await this.$awaitWraper(api.get(keyValue));
      if (data) {
        this.setForm(data);
        return true;
      } else {
        return false;
      }
    },

    async saveForm({ keyValue, isEdit }) {
      const postData = this.getForm();
      if (isEdit) {
        // Edit
        return await this.$awaitWraper(api.update(keyValue, postData));
      } else {
        // Add
        return await this.$awaitWraper(api.add(postData));
      }
    },
  },
};
</script>
